<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <base href="http://localhost:8080/bookstore/">
    <title>后台管理</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .border-iframe{
            width: 1500px;
            height: 750px;
        }
    </style>
</head>
<body>
<div id="app" class="border-iframe">
    <div>
        <el-button type="primary" @click="dialogFormVisible1 = true">增加书本</el-button>
        <el-dialog title="添加书本" :visible.sync="dialogFormVisible1" style="z-index: 999 !important;" append-to-body>
            <el-form :model="form">
                <el-form-item label="书名" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="作者" :label-width="formLabelWidth">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="form.stock" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible1 = false;addBook(form)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="layui-card-body">
        <template>
            <el-table
                    :data="message.list"
                    style="width: 100%">
                <el-table-column
                        label="日期"
                        width="180">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="书名"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>书名: {{ scope.row.name }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.name }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="作者"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>作者: {{ scope.row.author }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.author }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="价格"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>价格: {{ scope.row.price }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.price }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="销量"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>销量: {{ scope.row.sales }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.sales }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="库存"
                        width="180">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>库存: {{ scope.row.stock }}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.stock }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="dialogFormVisible = true;edit(scope.$index, scope.row)">编辑</el-button>
                        <el-dialog title="修改" :visible.sync="dialogFormVisible" style="z-index: 999 !important;" append-to-body>
                            <el-form :model="editData">
                                <el-form-item label="书名" :label-width="formLabelWidth">
                                    <el-input v-model="editData.name" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="作者" :label-width="formLabelWidth">
                                    <el-input v-model="editData.author" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="价格" :label-width="formLabelWidth">
                                    <el-input v-model="editData.price" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="库存" :label-width="formLabelWidth">
                                <el-input v-model="editData.stock" autocomplete="off"></el-input>
                            </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false;updatBook(editData)">确 定</el-button>
                            </div>
                        </el-dialog>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </template>
        <!--    页面跳转标签-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
</div>
</body>
<link href="https:/cdn.staticfile.org/layui/2.8.0/css/layui.css" rel="stylesheet">
<script src="static/script/layui.js"></script>
<link rel="stylesheet" href="static/style/layui.css">
<script src="static/script/vue.js"></script>
<script src="static/script/axios-0.18.0.js"></script>
<link rel="stylesheet" href="static/style/bootstrap.min.css">
<link rel="stylesheet" href="static/style/purecss.css">
<link rel="stylesheet" href="static/style/prism.css">
<link rel="stylesheet" href="static/style/bulma.css">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
<script src="element-ui-2.13.0/lib/index.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                message:{},
                total:100,
                currentPage:1,
                pageSize:10,
                user:[],
                isShowElement:false,
                formLabelWidth: '120px',
                editData: {},
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible1:false,
                gridData: {},
                form:{}
            }
        },
        methods:{
            show(){
                var that = this;
                axios({
                    url:"BookServlet?action=queryAll&pageNo="+that.currentPage+"&size="+that.pageSize,
                    type:"post",
                    dataType:"json",
                }).then(function (response) {
                    if(response.status===200){
                        that.message=response.data;
                        that.total=response.data.total;
                    }else{
                        alert("数据获取失败！！")
                    }
                },function (error) {
                    console.log(error)
                })
            },
            handleDelete(index,row){
                console.log(row.id)
                var id=row.id;
                var params=new URLSearchParams();
                params.append("id",id);
                axios.post("BookServlet?action=delete",params).then(response=> {
                    this.show();
                });
            },
            edit(index,row){
                console.log(row);
                this.editData=row;
            },
            getUser(){
                axios.post("UserServlet?action=getUser").then(response=>{
                    this.user=response.data;
                    this.isShowElement=false;
                })
            },
            logout(){
                console.log("注销")
                axios.post("UserServlet?action=logout").then(response=>{
                    this.show();
                })
            },
            //当前页面的最大数据量
            handleSizeChange(val) {
                // console.log(val);
                this.pageSize=val;
            },
            //分页函数
            // val参数获取当前点击的页数
            handleCurrentChange(val) {
                let _this=this;
                _this.currentPage=val;
                this.show();
            },
            updatBook(value){
                console.log(value)
                axios.post("BookServlet?action=updateBook",value).then(response=>{
                    alert("修改成功")
                })
            },
            addBook(value){
                // console.log(value);
                axios.post("BookServlet?action=addBook",value).then(response=>{
                    this.show();
                })
            }
        },created:function () {
            this.show();
            this.getUser();
        }
    })
</script>
</html>
